var myChart0 = echarts.init(document.getElementById('body-top-left'));
var myChart1 = echarts.init(document.getElementById('body-top-right'));



f_body_top_left();
f_body_top_right();

//设置图像左边折线图

function f_body_top_left() {

    myChart0.showLoading();
    var age = [];
    var number = [];

    $.ajax({
        type: 'get',
        url: 'json/person-info-body-top-left.json',
        dataType: 'json',
        success: function (result) {
            $.each(result.list, function (index, item) {
                age.push(item.age);
                number.push(item.number);
            });

            var option= {
                tooltip : {
                    trigger: 'axis',

                },
                color:['rgba(126,206,244,0.4)'],
                grid:{
                    left:50,

                },
                legend: {
                    data:['意向','预购','成交'],
                    textStyle:{backgroundColor:'rgb(255,228,0)'},

                },
                calculable : true,
                xAxis : {
                    type : 'category',
                    boundaryGap : false,
                    data : age,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#FFE400'
                        }
                    }
                },
                yAxis : {
                    show:false,
                    splitLine:{
                        show:false,
                    }
                },
                series : [
                    {

                        type:'line',
                        smooth:true,		//曲线是否光滑
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},	//圆柱体的areStyle形式
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'red' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'blue' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            origin:'auto',
                        },
                        data:number,
                    }
                ],

            };

            myChart0.hideLoading();

            myChart0.setOption(option);
        }
    });

}

//设置图像右边折线图

function f_body_top_right() {




    myChart1.showLoading();
    var position = [];
    var number = [];

    $.ajax({
        type: 'get',
        url: 'json/person-info-body-top-right.json',
        dataType: 'json',
        success: function (result) {
            $.each(result.list, function (index, item) {
                position.push(item.position);
                number.push(item.number);
            });


            var option= {
                tooltip : {
                    trigger: 'axis',

                },
                color:['rgba(126,206,244,0.4)'],
                grid:{
                    left:50,

                },
                legend: {


                },
                calculable : true,
                xAxis : {
                    type : 'category',
                    boundaryGap : false,
                    data : position,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#FFE400'
                        }
                    }
                },
                yAxis : {
                    show:false,
                    splitLine:{
                        show:false,
                    }
                },
                series : [
                    {

                        type:'line',
                        smooth:true,		//曲线是否光滑
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},	//圆柱体的areStyle形式
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'red' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'blue' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            origin:'auto',
                        },
                        data:number,
                    }
                ],

            };

            myChart1.hideLoading();
            myChart1.setOption(option);
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart1.hideLoading();
        },

    });
}


$(window).resize(function () {
    var w = $(window).width();
    var h = $(window).height();

    //body部分适配
    $(".body .body-top .body-top-left").css("width",(610/1920)*w+"px");
    $(".body .body-top .body-top-middle").css("width",(514/1920)*w+"px");
    $(".body .body-top .body-top-right").css("width",(610/1920)*w+"px");
    $(".body .body-down").css("width",(1865/1920)*w+"px");

    $(".body .body-top .body-top-left").css("height",(458/1080)*h+"px");
    $(".body .body-top .body-top-middle").css("height",(500/1080)*h+"px");
    $(".body .body-top .body-top-right").css("height",(458/1080)*h+"px");
    $(".body .body-down").css("height",(550/1080)*h+"px");

    //适配右边搜索框的宽度
    $(".container-fluid .body .body-top-right .search").css("width",(500/1920)*w+"px");

    //下方列表的宽度
    $(".body .body-down .body-down-head").css("width",(1802/1920)*w+"px");
    $(".body .body-down .body-down-data").css("width",(1801/1920)*w+"px");

    $(".body .body-down .body-down-head").css("height",(36/1080)*h+"px");
    $(".body .body-down .body-down-search").css("height",(50/1080)*h+"px");
    $(".body .body-down .body-down-data").css("height",(300/1080)*h+"px");


    myChart0.resize();
    myChart1.resize();

});
$(document).ready(function () {

    var w = $(window).width();
    var h = $(window).height();

    //body部分适配
    $(".body .body-top .body-top-left").css("width",(610/1920)*w+"px");
    $(".body .body-top .body-top-middle").css("width",(514/1920)*w+"px");
    $(".body .body-top .body-top-right").css("width",(610/1920)*w+"px");
    $(".body .body-down").css("width",(1865/1920)*w+"px");

    $(".body .body-top .body-top-left").css("height",(458/1080)*h+"px");
    $(".body .body-top .body-top-middle").css("height",(500/1080)*h+"px");
    $(".body .body-top .body-top-right").css("height",(458/1080)*h+"px");
    $(".body .body-down").css("height",(550/1080)*h+"px");

    //适配右边搜索框的宽度
    $(".container-fluid .body .body-top-right .search").css("width",(500/1920)*w+"px");

    //下方列表的宽度
    $(".body .body-down .body-down-head").css("width",(1802/1920)*w+"px");
    $(".body .body-down .body-down-data").css("width",(1801/1920)*w+"px");

    $(".body .body-down .body-down-head").css("height",(36/1080)*h+"px");
    $(".body .body-down .body-down-search").css("height",(50/1080)*h+"px");
    $(".body .body-down .body-down-data").css("height",(300/1080)*h+"px");


    myChart0.resize();
    myChart1.resize();



});